<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <form>
        <fieldset>
          <legend>姓名：单行文本 直接写v-model就行了</legend>
          <input type="text" v-model="uname" />
        </fieldset>
        <fieldset>
          <legend>
            性别：单选按钮 一组要写同样的v-model 并且每个按钮要设置value值
          </legend>
          男：<input type="radio" value="男" v-model="gender" /><br />
          女：<input type="radio" value="女" v-model="gender" />
        </fieldset>
        <fieldset>
          <legend>
            爱好：复选框 一组要写同样的v-model 并且每个按钮要设置value值
            v-model的值是数组
          </legend>
          篮球<input type="checkbox" value="篮球" v-model="aihao" /><br />
          唱歌<input type="checkbox" value="唱歌" v-model="aihao" /><br />
          写代码<input type="checkbox" value="写代码" v-model="aihao" />
        </fieldset>
        <fieldset>
          <legend>火车票：下拉框 单选</legend>
          <select v-model="ticket">
            <option value="0">一等座</option>
            <option value="1">二等座</option>
            <option value="2">无座</option>
          </select>
        </fieldset>
        <fieldset>
          <legend>火车票：下拉框 多选 v-model的值是数组</legend>
          <select v-model="ticket1" multiple>
            <option value="0">一等座</option>
            <option value="1">二等座</option>
            <option value="2">无座</option>
          </select>
        </fieldset>
        <fieldset>
          <legend>多行文本</legend>
          <textarea v-model="desc"></textarea>
        </fieldset>
      </form>
    </div>
    <script src="js/vue.js"></script>
    <script>
      var vm = new Vue({
        el: '#app',
        data: {
          uname: 'zs',
          gender: '男',
          aihao: ['篮球', '写代码'],
          ticket: 1,
          ticket1: [1, 2],
          desc: '个人简介',
        },
        methods: {},
      })
    </script>
  </body>
</html>
